import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';
import { List, InputItem,  Toast, Flex,Icon,Modal,WingBlank,Button,Radio,Steps, Badge } from 'antd-mobile';
import {memberCenter} from "./memberCenter.less";
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyListView from '../../components/MyListView/MyListView';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";


import rightSVG from '../../assets/img/right.svg';
import { heard, active, model, MyList, box_div, messageCSS, noData } from "./messagesCenter.less"
const {Item} =List;
const Step = Steps.Step;
const Brief = Item.Brief;


class MessagesCenter extends Component {
    constructor(props) {
        super(props);
        this.state={
            visible: false,
            model: 0,
        };
        this.AlloyTouch = null;
    }

    loadMore = () => this.props.dispatch({ type: 'member/GetLogistics', obj:{ pageno: this.props.member.logisticsData.pageNo + 1 } })

    getAlloyTouch = AT => this.AlloyTouch = AT

    changeOrder = ( sortField, sortOrder ) =>{
        this.AlloyTouch.to(0);
        // Toast.loading();
        // console.log(sortField, sortOrder);

        // this.props.dispatch({
        //     type: 'storesShow/getgoodsEFF',
        //     obj:{
        //         id:this.props.match.params.id,
        //         pageNo:1,
        //         sortField:sortField,
        //         orderBy:sortOrder,
        //         goodsType:0
        //     }
        // });
    }

    refresh = () => {
        return this.props.dispatch({ type: 'member/GetLogistics', obj:{ pageNo:1 }});
    }

    titleClick = n => {
        this.setState({model: n});
        this.AlloyTouch.to(0)
    }

    render() {
        // console.log(this.props.member.logisticsData.pageSize == this.props.member.logisticsData.totalRecords || this.props.member.logisticsData.pageNo * this.props.member.logisticsData.pageSize < this.props.member.logisticsData.totalRows, "判断还有没有数据了。。。。。。。。。。。。。。。比较麻烦。。。");

        return (
            <div style={{height: "100%", backgroundColor: "#F7F7F7", position: 'relative'}}>
                <NavTopBar style={{ border: "none" }} title="消息中心" dispatch={this.props.dispatch}/>

                <Flex className={ heard }>
                    <Flex.Item><span className={ this.state.model == 0 ? active : "" } onClick={ e => this.titleClick(0) }>物流<Badge text={ 0 }/></span></Flex.Item>
                    {/*<Flex.Item><span className={ this.state.model == 1 ? active : "" } onClick={ e => this.titleClick(1) }>互动<Badge text={ 22 }/></span></Flex.Item>*/}
                </Flex>

                {/* <div className={ box_div }> */}

                            {/* 暂时无互动消息。所以使用的都是 this.props.member.logisticsList      有互动消息再改成互动消息列表*/}
                    {
                        this.state.model ? this.props.member.logisticsList[0] : this.props.member.logisticsList[0] ?
                        <MyListView
                            // key={ layoutType == true ? 1 : 0 }
                            className={ MyList }
                            getAlloyTouch={ this.getAlloyTouch }
                            refresh={ this.refresh }
                            loadMore={ this.loadMore }
                            hasMore={ this.props.member.logisticsData.pageNo * this.props.member.logisticsData.pageSize < this.props.member.logisticsData.totalRows }
                            // itemWrapperClass={ goods_list }
                            // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                            renderItem={(v,i,a)=>{
                                return ( this.state.model ?
                                     <div key={i} className={ messageCSS }>
                                         <img src={require("../../assets/img/text.png")}/>

                                         <div>
                                             <p>唐生</p>
                                             <p>这里后台没数据。。。不用看着了。。。</p>
                                         </div>

                                         <span>10:22</span>

                                     </div> :
                                     <div key={i} className={ model }>
                                        {
                                            i == 0 ? <p>{ v.createTimeStr }</p> : ""
                                        }
                                        <div>
                                            <p>物流跟踪</p>
                                            <div className="center"  onClick={()=>{
                                                this.props.dispatch(routerRedux.push({
                                                    pathname:`/orderTrack/${v.nu}`
                                                }))
                                            }}>
                                                <div style={{width:"1.8rem",height:"1.8rem"}}>
                                                    <NoLazyImg style={{width:"1.8rem",height:"1.8rem",border:"1px solid #e5e5e5"}} src={ v.orderImg }/>
                                                </div>
                                                <p>{ v.context }</p>
                                                <span><Icon style={{width:".3rem",height:".3rem"}} type={ rightSVG.id }/></span>
                                            </div>
                                        </div>
                                    </div>
                                )
                            }}
                            data={ this.state.model ? this.props.member.logisticsList : this.props.member.logisticsList }>
                        </MyListView>
                        :
                        <div className={ noData }>
                            <img src={require('../../assets/img/noLogistics.png')} />
                            <p>暂无{ this.state.model ? '物流' : '互动' }消息</p>
                        </div>
                    }



                {/* </div> */}
                {/*
                */}



            </div>
        )
    }
}

export default connect(({ member }) => ({ member }))(MessagesCenter);
// totalRecords != pageSize =====================   当前页数据数量 不等于 每页的数据数量  || pageNo * pageSize >= totalRows
